<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="装箱详情" v-model="visible" class="full" align-center width="1000px" :z-index="2000" @close="handleClose">
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #toolbar_btns>
        <strong>装箱明细</strong>
        <VExport  name="box_detail" :tableRef="tableRef" task class="ml-auto">导出装箱明细
        </VExport>
      </template>
    </VTable>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
    </template>
    <el-dialog title="装箱详情" v-model="show" align-center width="800px" @close="show = false">
      <vxe-table :data="data" class="my-2">
        <vxe-column title="SKU" field="sku"></vxe-column>
        <vxe-column title="FNSKU" field="to_fn_sku"></vxe-column>
        <vxe-column title="数量" field="num" width="100"></vxe-column>
        <vxe-column title="长宽高" min-width="160">
          <template #default="{row}">{{row.length}} * {{ row.width }} * {{ row.height }}</template>
        </vxe-column>
      </vxe-table>
      <template #footer>
        <el-button @click="show = false">关 闭</el-button>
      </template>
    </el-dialog>
  </el-dialog>
</template>

<script setup lang="jsx">
import api from '../api'
import { ElMessage } from 'element-plus'


const load = ref(false)
const visible = ref(false)
let loadings = reactive({})
const tableRef = ref()
const data = ref([])
const show = ref(false)
// 查询
const query = () => {
  tableRef?.value.query()
}

// 列表配置
const tableOptions = reactive({
  size: 'small',
  showHeaderOverflow: false,
  formConfig: {
    data: {
      supplier: { type: 'sku' },
    }
  },
  columns: [
    { field: 'head_box_order_no', title: '箱号', minWidth: 200 },
    { field: 'weight', title: '重量', minWidth: 80 },
    {
      title: '体积(长*宽*高)立方厘米', width: 200, slots: {
        default: ({ row }) => {
          return <div>
            <div>{row.volume}</div>
            <div>{row.length} * {row.width} * {row.height}</div>
          </div>
        }
      }
    },
    { field: 'sku_count', title: 'SKU数量', minWidth: 80 },
    { field: 'throw_weight_proportion', title: '抛重比', minWidth: 80 },
    {
      title: '详情', width: 80, slots: {
        default: ({ row }) => {
          return <el-button link type='primary' onClick={() => (data.value = row.detail) && (show.value = true)}>查看</el-button>
        }
      }
    },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => api.boxDetail({ ...form, ...page })
    }
  }
})

const emit = defineEmits(['close', 'change'])

// 打开弹窗
const open = async (deliver_no) => {
  if (!load.value) {
    load.value = true
  }
  loadings = reactive({})
  visible.value = true
  nextTick(() => {
    tableRef.value.setForm({ deliver_no })
    tableRef.value.query()
  })
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

defineExpose({ open })
</script>